<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- 
    JSP Name : da_500_01E.jsp
    Description : 포토 갤러리 영문(사용자)
    author Seung Won
    since 2012. 8. 23.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 8. 23.     Seung Won     최초 생성
--%>
<%@ include file="/WEB-INF/jsp/co/us/include/declare.jspf" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Photo Gallery &#124; HMC CSR</title>
<meta name="description" content="You glimpse HMC’s CSR activities around the world on this CSR Photo Gallery page." />
<meta name="keywords" content="HMC CSR, CSR Photo Gallery, Photo Gallery, photo" />
<%@ include file="/WEB-INF/jsp/co/us/include/header.jspf" %>
<link rel="stylesheet" type="text/css" href="/css/usr/eng.css" media="screen" />
<script type="text/javaScript" language="javascript">
<!--
$(document).ready(function() {
    /* form validation check */
    onloadCharCheck();
    
    $("#srchButn").bind("click", moveSearch);    // 검색
    $("#srchTxt").bind("keydown", eventEnter);    // 엔터키 제어
    
});

var preIdx = "";    //이전 이미지 INDEX
var nxtIdx = "";    //다음 이미지 INDEX
var titl = "";      //현재 이미지 제목
var fbImage = "";      //현재 이미지링크

/*
 * 페이징 
 */
function movePage(num) {
    $("#currentPageNo").val(num);
    $("#mainForm").attr('action','/da_500_01.do').submit();
}

/*
 * 검색
 */
function moveSearch() {
    
    if (!isSchrChk($("#srchTxt").val())) {
        alert("Results will not be able to enter special characters.");
        $("#srchTxt").focus();
        return false;
    }
    
    if($("#srchTxt").val().length == 0) {
        alert("Please Insert Search Word.");
        $("#srchTxt").focus();
        return false;
    }
    
    $("#currentPageNo").val("1");
    $("#mainForm").attr('action','/da_500_01.do').submit();
}

/*
 * 검색 Text EnterKey 처리
 */
function eventEnter() {
    if (event.key == 13) {
        moveSearch();
    }
}

/*
 * 이미지 팝업 이전 이미지
 */
function prePopOpen(){
    if (preIdx == "") return;
    
    imgPop(preIdx);
}

/*
 * 이미지 팝업 다음 이미지
 */
function nxtPopOpen(){
    if (nxtIdx == "") return;
    
    imgPop(nxtIdx);
}

/*
 * 이미지 팝업 Ajax처리
 */
function imgPop(argIdx){
    var url = "/da_500_02.do";
    var param = "phtIdx="+argIdx;
    
    ajaxSubmit(url, param, callbackMapJson);
}

/*
 * 이미지 팝업 Ajax CallBack
 */
function callbackMapJson(jsonData) {
    var html = "";
    var evalData = eval(jsonData);

    document.getElementById("ybPlayer").innerHTML = "";
    if (evalData != null) {
    	if(evalData.videoYn == 'Y'){	
        	document.getElementById("ybPlayer").innerHTML = "<iframe id='youtubePlayer' name='youtubePlayer' type='text/html' width='510px' height='360px' src='http://"+ evalData.videoTag + "' frameborder='0' allowfullscreen>";
        	document.getElementById('photoPlayer2').style.display = 'none';
        	document.getElementById('photoPlayer').style.display = '';
        	
	    }else{
            $("img[id='lImg']").attr("src", "./upfile/"+evalData.thumnimgpath+"/"+evalData.thumnimgnm);
	    	document.getElementById('photoPlayer2').style.display = '';
	    	document.getElementById('photoPlayer').style.display = 'none'; 
    	}
    	$("p[id='lViewTitle']").html("<strong>"+evalData.titl+"</strong>&nbsp;<span>"+evalData.rgstdt+"</span>");
        $("p[id='lVewComment']").html(evalData.sbc);
        
        preIdx = evalData.prephtidx;
        nxtIdx = evalData.nxtphtidx;
        
        titl = evalData.titl;
        fbImage = "/upfile/"+evalData.thumnimgpath+"/"+evalData.thumnimgnm;
    }
}

/*
 * 스크립트 Split
 */
function stringSplit(strData, strIndex){ 
    var stringList = new Array();
    
    while(strData.indexOf(strIndex) != -1) {
        stringList[stringList.length] = strData.substring(0, strData.indexOf(strIndex)); 
        strData = strData.substring(strData.indexOf(strIndex)+(strIndex.length), strData.length); 
    }
    
    stringList[stringList.length] = strData; 
    return stringList; 
   }


/*
 * 페이스북 Share 링크
 */
function goFaceBook(title, link) {
    var arrLink = stringSplit(link, "?");
    var arrLinkImg = stringSplit(link, "/");
    var fullUrl;     
    var url = arrLink[0]+"?key=" + $("#currentPageNo").val() + "k2";
    
    var title = title;     
    var summary = titl;       
    var pWidth = 640;     
    var pHeight = 380; 
    var pLeft = (screen.width - pWidth) / 2;     
    var pTop = (screen.height - pHeight) / 2;       
    fullUrl = "http://www.facebook.com/share.php?s=100&p[url]="+ url                 
    +"&p[images][0]="+ arrLinkImg[0] + "//" + arrLinkImg[2] + fbImage
    +"&p[title]="+ title                 
    +"&p[summary]="+ summary;     
    
    fullUrl = fullUrl.split("#").join("%23");     
    fullUrl = encodeURI(fullUrl);    
    
    window.open(fullUrl, "facebook", "width="+ pWidth +",height="+ pHeight +",left="+ pLeft +",top="+ pTop +",location=no,menubar=no,status=no,scrollbars=no,resizable=no,titlebar=no,toolbar=no"); 
}

/*
 * 트위터 Share 링크
 */
function goTwitter(title, link) {
    var pWidth = 640;     
    var pHeight = 380; 
    var pLeft = (screen.width - pWidth) / 2;     
    var pTop = (screen.height - pHeight) / 2;       
    var arrLink = stringSplit(link, "?");
    var url = arrLink[0]+"?key=" + $("#currentPageNo").val() + "k2";
    
    var href = "http://twitter.com/intent/tweet?text=" + encodeURIComponent(title) + " " + encodeURIComponent(url);
    var a = window.open(href, 'twitter', "width="+ pWidth +",height="+ pHeight +",left="+ pLeft +",top="+ pTop +",location=no,menubar=no,status=no,scrollbars=no,resizable=no,titlebar=no,toolbar=no");
    if(a) { a.focus(); }
}

//-->
</script>
</head>
<body>
<div id="wrap">
    <!-- top -->
    <%@ include file="/WEB-INF/jsp/co/us/include/topE.jsp" %>
    <!-- top -->
 
    <!-- container -->
    <div id="container">
        <div id="contentsWrap">
            <div id="contentsArea">
                <div class="headingArea">
                    <h2>Photo Gallery </h2>
                </div>
                <form id="mainForm" name="mainForm" method="post" onsubmit="">
                    <input type="hidden" id="currentPageNo" name="currentPageNo" value="${paginationInfo.currentPageNo}" />
                    <input type="hidden" id="mlgScnCd" name="mlgScnCd" value="EN" />
                    <%-- Locale --%>
                    <input type="hidden" id="CSR_LOCALE_PARAM" name="CSR_LOCALE_PARAM" value="en" />
                <div id="contetns">
                    <div class="location">
                        <a href="/ma_100_01.do">Home</a>
                        <a href="/da_100_01.do">CSR Materials</a>
                        <span>Photo Gallery</span>
                    </div>
                    <div class="searchArea">
                        <div id="search">
                            <fieldset>
                                <legend class="invisible">search</legend>
                                <strong class="ketyword">Search by Keyword:&nbsp;</strong>
                                <div class="selectArea">
                                    <select id="srchScn" name="srchScn">
                                        <option value="">all</option>
                                        <option value="titl" <c:if test="${rqInfo.srchScn == 'titl' }">selected</c:if> >title</option>
                                        <option value="sbc" <c:if test="${rqInfo.srchScn == 'sbc' }">selected</c:if> >content</option>
                                    </select>
                                </div>
                                <input type="text" class="formSearch" id="srchTxt" name="srchTxt" onClick="return false;" value="${rqInfo.srchTxt }" title="검색어" maxlength="10" minbyte="1" /><input type="image" id="srchButn" onClick="return false;" src="/img/usr/eng/btn/btn_search_font.gif" title="search" alt="search" />
                            </fieldset>
                        </div>
                    </div>
                    <div class="photoGalleryList">
                        <ul>
                            <c:choose>
                                <c:when test="${resultList != null && !empty resultList }">
                                    <c:forEach var="result" items="${resultList }" varStatus="status">
                            <li class="layOpen">
                                    <span class="figure"><img onClick="imgPop('${result.phtIdx}');" onerror="this.src='./img/usr/common/no_img_170_120.gif';" src="/upfile/${result.thumnImgPath }/${result.thumnImgNm}" alt="${result.titl }"  width="170" height="120" /></span>
                                    <span class="viewTitle"><strong>${result.titl }</strong>&nbsp;<span>2012.05.07</span></span>
                                    <span class="viewComment">${result.sbc }</span>
                            </li>
                                    </c:forEach>
                                </c:when>
                                <c:otherwise>
                            <li class="layOpen">
                                    <span class="figure">No Data.</span>
                                    <span class="viewTitle"></span>
                                    <span class="viewComment"></span>
                            </li>
                                </c:otherwise>
                            </c:choose>
                        </ul>
                    </div>
                    <div class="pageNate">
                        <able:pagination paginationInfo="${paginationInfo }" type="image" jsFunction="movePage" />
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /container -->
 
    <!-- layer -->
    <div class="layer">
        <div class="mask"></div>
        <div class="layPop">
            <p class="btnClose"><button type="button">close</button></p>
            <div class="photoView">
                <p class="viewPrev"><a href="#" onclick="return false;"><img onclick="prePopOpen();" src="/img/usr/btn/btn_photo_view_left.png" alt="이전" /></a></p>
                <div class="photoCommentArea">
                    <table id="photoPlayer" style="width: 510px;height: 405px " border="0">
                    		<tr>
                    			<td height="26px">
                    			</td>
                    		</tr>
                    		<tr>
                    			<td id="ybPlayer" style="">
                    				
                    			</td>
                    		</tr>
                    		<tr>
                    			<td height="13px">
                    			</td>
                    		</tr>
                	</table>
                    <p id="photoPlayer2" class="figure"><img id="lImg" onerror="this.src='./img/usr/common/no_img_170_120.gif';" src="" alt="" width="510" height="360"/></p>
                    <p id="lViewTitle" class="viewTitle"><strong></strong>&nbsp;<span></span></p>
                    <p id="lVewComment" class="viewComment"></p>
                    <p id="lSns" class="sns"><a href="javascript:void(0);" onclick="javascript:goFaceBook('CSR Materials - Photo Gallery', location.href);"><img src="/img/usr/btn/btn_photo_layer_facebook.gif" alt="facebook" /></a><a href="javascript:void(0);" onclick="javascript:goTwitter('CSR Materials - Photo Gallery', location.href);"><img src="/img/usr/btn/btn_photo_layer_tweeter.gif" alt="tweeter" /></a></p>
                </div>
                <p class="viewNext"><a href="#" onclick="return false;"><img onclick="nxtPopOpen();" src="/img/usr/btn/btn_photo_view_right.png" alt="다음" /></a></p>
            </div>
        </div>
    </div>
    <!-- /layer -->
 
    <!-- footer -->
    <%@ include file="/WEB-INF/jsp/co/us/include/bottomE.jsp" %>
    <!-- /footer -->
</div>
</body>
</html>
